<template>
    <div>
      <router-link tag="li" to="/Index">
          <a>返回上一步</a>
      </router-link>
      <el-tabs type="border-card">
        <div v-show="show=false" ref="id">{{$route.params.id}}</div>
        <el-tab-pane label="企业信息">
          <ul class="ul">
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业名称：&nbsp;&nbsp;&nbsp;{{ $route.params.enterpriseName }}</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法人姓名：&nbsp;&nbsp;&nbsp;{{ $route.params.realName }}</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身份证号：&nbsp;&nbsp;&nbsp;{{ $route.params.idCard }}</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法人电话：&nbsp;&nbsp;&nbsp;{{ $route.params.phone }}</li>
            <li>社会信用代码：&nbsp;&nbsp;&nbsp;{{ $route.params.socialCreditCode }}</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开户银行：&nbsp;&nbsp;&nbsp;{{ $route.params.bank }}</li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;银行卡号：&nbsp;&nbsp;&nbsp;{{ $route.params.bankCardNumber}}</li>
            <li class="id">身份证正反面：<img :src="$route.params.zhengIdCardUrl" alt=""><img :src="$route.params.fanIdCardUrl" alt=""></li>
            <li class="zz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;营业执照：<img class="yy" :src="$route.params.businessLicense" alt=""></li>
          </ul>
        </el-tab-pane>
        <el-tab-pane style="padding:0 50px" label="工资表">
          <div class="block">
            <el-select v-model="value" @change="changeValue" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div class="tab">
              <div class="reg" @click="show1 = true" :class="show1?'active':''">完整版下载</div>
              <div class="pay" @click="show1  = false" :class="show1?'':'active'">银行版下载</div>
            </div>
          </div>
          <ul v-if="show1" class="info1">
            <li>
              <div class="information" v-if="showMole">
                <span class="time">{{this.time}}</span>
                <img src="../assets/img/biao.png" alt="">
                <el-button class="btn" type="primary" size="mini" @click="downFile">下载</el-button>
              </div>
              <div v-else style="width:120px;color:#ccc;margin:0 auto;">暂无数据</div>
            </li>
          </ul>
          <ul v-else class="info1">
            <li>
              <div class="information" v-if="showMole">
                <span class="time">{{this.time}}</span>
                <img src="../assets/img/biao.png" alt="">
                <el-button class="btn" type="primary" size="mini" @click="downFile1">下载</el-button>
              </div>
              <div v-else style="width:120px;color:#ccc;margin:0 auto;">暂无数据</div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="充值记录">
          <div><el-button type="primary" size="mini" style="width:100px;height:30px;margin:24px;margin-left: 900px;" @click="ch">充值</el-button></div>
          <div>
             <el-table
              :data="Mlist"
              style="width: 100%"
              :header-cell-style="{
                'border-bottom': '5px solid #eee'
              }">
              <el-table-column
                prop="createTimeFormat"
                label="时间"
                width="200">
              </el-table-column>
              <el-table-column
                prop="dockingBanks"
                label="对接银行"
                width="200">
              </el-table-column>
              <el-table-column
                prop="money"
                width="200"
                label="充值金额">
              </el-table-column>
              <el-table-column
                prop="serviceInterestFormat"
                width="200"
                label="服务费利率(%)">
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注"
                min-width="200">
              </el-table-column>
            </el-table>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-size="pageSize"        
                layout="prev, pager, next"
                :total="total1"
                >
            </el-pagination>
          </div>
          <!-- 充值 -->
          <el-dialog title="充值" :visible.sync="show5" width="335px">
            <!-- <img src="../assets/img/chahao.png" alt=""> -->
            <!-- <div class="title1">充值</div> -->
            <el-input class="mon" v-model="money" placeholder="请输入充值金额"></el-input>
            <div class="rate">
              <el-input v-model="rate" :disabled="disabled" placeholder="请输入服务费利率"></el-input>
              <div class="pos">%</div>
            </div>
            <div class="button">
              <el-button class="btn1" @click="yes">确认</el-button>
              <el-button class="btn2" @click="no">取消</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
       
      </el-tabs>
    
    </div>
    
</template>

<script>
  
  
export default {
  
  data () {
    return {
       showMole:true,
       timeFormat:'',
       time:'',
       show1:true,
       Mlist:[],//充值记录
       zhengIdCardUrl:'',
       fanIdCardUrl:'',
       show5:false,//充值
       pageIndex:1,
       pageSize:5,
       id:'',
       money:'',
       rate:'',
       total1:0,//充值记录表格总条数
       options: [{
          value: '2019',
          label: '2019'
        }, {
          value: '2020',
          label: '2020'
        }, {
          value: '2021',
          label: '2021'
        }, {
          value: '2022',
          label: '2022'
        }, {
          value: '2023',
          label: '2023'
        }],
        value: '',
        disabled:false
    }
  },
  created(){
    
    
  },
  mounted() {
    console.log(this.$refs.id.innerHTML)
    this.id = this.$refs.id.innerHTML
    this.biao()
    // this.userInfo()
    this.Money()
  },


  methods:{
   
    //下载工资表--完整版
    downFile(){
      this.$axios({
          method: 'get',
          url: '/xls/certainMonthToDownload',
          params: {
              id:this.id,
              timeFormat:this.timeFormat,     
          },
          responseType: 'arraybuffer'
          }).then(res=>{
             console.log(res.data)
             var fileName = '工资表格完整版.xls'//此处获取文件名称
　　　　　　　this.download(res.data,fileName) //此处跳转到第三步
          },err=>{
              console.log(err);
      })
    }, 
    download (data,fileName) {
　　　if (!data) {
　　　　　return
　　　}
　　　let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
　　　let link = document.createElement('a') //创建a标签
　　　link.style.display = 'none'  //将a标签隐藏
　　　link.href = url  //给a标签添加下载链接
　　　link.setAttribute('download', fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
　　　document.body.appendChild(link)  
　　　link.click()  //执行a标签
　　},

    //下载工资表--银行版
    downFile1(){
      this.$axios({
          method: 'get',
          url: '/xls/certainMonthToDownload2',
          params: {
              id:this.id,
              timeFormat:this.timeFormat,     
          },
          responseType: 'arraybuffer'
          }).then(res=>{
             console.log(res.data)
             var fileName = '工资表格银行版.xls'//此处获取文件名称
　　　　　　　this.download(res.data,fileName) //此处跳转到第三步
          },err=>{
              console.log(err);
      })
    }, 
    download (data,fileName) {
　　　if (!data) {
　　　　　return
　　　}
　　　let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
　　　let link = document.createElement('a') //创建a标签
　　　link.style.display = 'none'  //将a标签隐藏
　　　link.href = url  //给a标签添加下载链接
　　　link.setAttribute('download', fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
　　　document.body.appendChild(link)  
　　　link.click()  //执行a标签
　　},
 
    
    //充值记录分页
    handleSizeChange: function(pageSize) { // 每页条数切换
        this.pageSize = pageSize
        
        this.handleCurrentChange(this.pageIndex);
    },
    handleCurrentChange: function(pageIndex) {//页码切换
        this.pageIndex = pageIndex
        // this.currentChangePage(this.list,pageIndex)
        this.Money()
        
    },
    //充值确认
    yes(){
      console.log(this.money)
      this.$axios({
          method: 'post',
          url: '/laowuUser/saveRecharge',
          params: {
              userId:this.id,
              money:this.money,
              serviceInterest:this.rate/100
          }
          }).then(res=>{
             if(res.data.code = 200){
               this.show5 = false
               this.Money()
             }
          },err=>{
              console.log(err);
      })
    },
    //充值取消
    no(){
      this.money = ""
      this.show5 = false
    },
    //充值
    ch(){
      this.show5 = true
      this.$axios({
          method: 'get',
          url: '/laowuUser/getFirstInterestRate',
          params: {
              userId:this.id,
          }
          }).then(res=>{
            //  console.log(res.data)
             if(!res.data.data){
              this.rate = res.data.data
              this.disabled = false
             }else{
              //  console.log(res)
              this.rate = res.data.data * 100
              this.disabled = true
               
             }
          },err=>{
              console.log(err);
      })
      
    },
    
    
    //工资表
    biao(){
      // console.log(row)
     
      this.$axios({
          method: 'post',
          url: '/laowuUser/lookAnnualPayroll',
          params: {
              id:this.id,
              year:'2021'
          }
          }).then(res=>{
              console.log("888888888",res.data);
              if(res.data.data.length >0){
                this.showMole = true
                this.time = res.data.data[0].monthDateFormat
                this.timeFormat = res.data.data[0].timeFormat
              }else{
                this.showMole = false
              }
              
          },err=>{
              console.log(err);
        })
    },
    //工资表的查询
    changeValue(row){
      console.log(row,"1111")
      this.$axios({
          method: 'post',
          url: '/laowuUser/lookAnnualPayroll',
          params: {
              id:this.id,
              year:row
          }
          }).then(res=>{
              console.log("888888888",res.data);
              if(res.data.data.length >0){
                this.showMole = true
                this.time = res.data.data[0].monthDateFormat
                this.timeFormat = res.data.data[0].timeFormat
              }else{
                this.showMole = false
              }
              
          },err=>{
              console.log(err);
        })
    },
    
    //员工查询

    //充值记录
    Money(){
      this.$axios({
          method: 'get',
          url: '/laowuUser/lookRecharge',
          params: {
              id:this.id,
              pageIndex:this.pageIndex,
              pageSize:5,
              // year:'2021'
          }
          }).then(res=>{
              console.log(res.data);
              this.Mlist = res.data.data.dtos
              this.total1 = res.data.data.total
          },err=>{
              console.log(err);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
  
}
li {
  display: block;
  margin: 10px;
}
a {
  text-decoration: none;
  color: #666666;
}
.el-tabs{
  /* width: 1040px; */
  height: 543px;
  background: #FFFFFF;
  margin-top:16px;
}
.ul{
  margin-left: 40px;
}
.info1 .information{
  width:120px;
}
.info1 .information .time{
  display:block;
  width: 60px;
  height: 13px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #808080;
  line-height: 13px;
  margin:10px auto;
}
.info1 .information img{
  display:block;
  width: 120px;
  height: 120px;
  
}
.info1 .information .btn{
  width: 80px;
  height: 30px;
  text-align: center;
  display:block;
  margin:12px auto;
}
.id,.zz{
  margin: 30px 0;
}
.id img,.zz img{
  width: 77px;
  height: 48px;
  margin-left: 15px;
  margin-right: 10px;
  vertical-align:top;
}
li .yy{
  width: 173px;
  height: 80px;

}
.box img{
  width:120px;
  height:120px;
}
.block{
  display: flex;
  align-items: center;
}
.tab{
  display: flex;
  width: 800px;
  margin-left: 61px;
  /* padding: 10px 0; */
  border-bottom: 1px solid #F0F2F5;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.reg,.pay{
  margin-right: 20px;
  padding: 10px 0;
}
.active{
  color: #108EE9;
  border-bottom: 1px solid #108EE9;
}
.el-select{
  width: 160px;
  height: 30px;
  margin: 30px 0;
}

.el-dialog .title,.el-dialog .title1{
  height: 44px;
  background: #108EE9;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 44px;
  text-align:center;
  /* // margin-bottom:60px; */
}
/* .el-dialog .title1{
  width:335px;
  margin-top: -60px;
  margin-left: -20px;
  z-index: 99;
  opacity: .8;
} */
.el-dialog .rate{
  position: relative;
}
.el-dialog .rate .el-input{
  width: 255px;
  height: 54px;
  margin: 0 20px;
}
.el-dialog .rate .pos{
  position: absolute;
  top: 10px;
  right: 50px;
  /* z-index: -1; */
}
.idcard li{
  display: inline-block;
}
.idcard li img{
  margin-top:60px;
  width: 296px;
  height: 185px;
  /* margin-right: 0px; */
}
.el-dialog .el-select{
  margin:30px 0;
}
.el-dialog .mon{
  width: 255px;
  height: 54px;
  margin: 40px 20px;
  margin-bottom:20px;
}
.el-dialog .button{
  width: 255px;
  margin: 0 20px;
}
.el-dialog .button .btn1,.el-dialog .button .btn2{
  width: 92px;
  height: 36px;
  /* margin-right: 50px;
  margin-left: 30px; */
}
.el-dialog .button .btn1{
  margin-left: 11px;
  margin-right: 34px;
}
.yuan{
  margin-top: 40px;
  margin-left: 30px;
}
</style>
